<template>
    <layout>
        <div class="order" @click="hiddenForm()">
            <div class="search">
                <div class="form" @click="showForm()">
                    <input type="text" disabled placeholder="客户姓名/手机号码">
                    <span class="icon icon-sousuo"></span>
                </div>
                <span class="icon quick-search" @click="showSearchList()"></span>
                <div class="headAction" v-if="qSearch">
                    <div class="menuShade" @click=" headMenuBlur"></div>
                    <ul>
                        <li v-for="(item, index) in q_status" @click="qStatus(item.status,index)"
                            v-bind:class="{active: qActive == index}">{{item.text}}
                        </li>
                    </ul>
                </div>
            </div>
            <!--搜索表单-->
            <div class="search-form c-search" v-show="fSearch">
                <div class="form-group">
                    <label>
                        客户姓名
                    </label>
                    <input type="text" v-model="searchParm.name">
                </div>
                <div class="form-group">
                    <label>
                        手机号码
                    </label>
                    <input type="number" v-model="searchParm.phone">
                </div>
                <div class="form-group pull create-time">
                    <label>
                        提单时间
                    </label>
                    <div class="date iconCell">
                        <div @click="openPicker(0)">
                            <input type="text" v-model="searchParm.start_at" disabled>
                        </div>
                        <div class="iconfont">
                            <i class="icon-close little" v-if="searchParm.start_at" @click="clearStartAt"></i>
                            <i class="icon-xiala" @click="openPicker(0)"></i>
                        </div>
                    </div>
                    <span>至</span>
                    <div class="date iconCell">
                        <div @click="openPicker(1)">
                            <input type="text" v-model="searchParm.end_at" disabled>
                        </div>
                        <div class="iconfont">
                            <i class="icon-close little" v-if="searchParm.end_at" @click="clearEndAt"></i>
                            <i class="icon-xiala" @click="openPicker(1)"></i>
                        </div>
                    </div>

                </div>
                <div class="form-group pull iconCell">
                    <label>
                        城市
                    </label>
                    <div @click="cityVisible=true">
                        <input type="text" v-model="cityName" disabled id="demo">
                    </div>
                    <div class="iconfont">
                        <i class="icon-close" v-if="searchParm.city" @click="clearCity"></i>
                        <i class="icon-xiala" @click="cityVisible=true"></i>
                    </div>
                </div>
                <div class="form-group ">
                    <label>
                        门店名称
                    </label>
                    <input type="text" v-model="searchParm.store_name">
                </div>

                <div class="form-group pull iconCell">
                    <label>
                        状态
                    </label>
                    <div @click="showContract">
                        <input type="text" v-model="c_s_text" disabled>
                    </div>
                    <div class="iconfont">
                        <i class="icon-close" v-if="searchParm.status" @click="clearStatus"></i>
                        <i class="icon-xiala" @click="showContract"></i>
                    </div>
                </div>
                <div class="btn" @click="submit()">
                    查询
                </div>
            </div>
            <!--订单列表-->
            <div class="order-list">

                <!--没有数据-->
                <noData v-on:search="showForm" v-if="no_data"></noData>
                <!--下拉加载-->
                <scroller v-if="!no_data" v-on:load="loadmore" v-on:refresh="refresh" ref="scroller">
                    <template v-for="(item, index) in orderList">
                        <div class="order-item">
                            <div class="top color" @click="(qActive=='1')?toOrderDetail(item.oid,item.status):toOrderDetail(item.contract_no,item.status)">
                                <span class="color1">合同编号</span> {{item.contract_no}}
                            </div>
                            <div class="content">
                                <ul>
                                    <li class="relative">
                                        <span class="name color width">{{item.id_card_name}}</span>
                                        <span class="color1">{{item.mobile}}</span>
                                        <div class="btn-group">
                                            <span class="btn " v-if="contractStatus[item.status]">{{contractStatus[item.status]}}</span>
                                            <span class="btn no-register" v-else style="margin-left: 0.8rem">未提交</span>
                                            <a class="btn" v-bind:href="'tel:'+item.mobile">拨打</a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="color1 width">借款金额</span>
                                        <span class="active x-width">{{item.ci_loan_money}}</span>
                                        <span class="active">{{item.ci_periods}}期</span>
                                    </li>
                                    <li>
                                        <span class="color1 width">身份证</span>
                                        <span class="color">{{item.id_card_no|idCardConfusion}}</span>
                                    </li>
                                    <li>
                                        <span class="color1 width">提单时间</span>
                                        <span class="color">{{item.create_time|unixTime}}</span>
                                    </li>
                                    <li>
                                        <span class="color1 width">项目</span>
                                        <span class="color">{{item.product_name}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="time color1">
                                <span>{{item.store_name}}</span>
                            </div>
                        </div>
                    </template>
                </scroller>
            </div>

            <!--日期组件-->
            <mt-datetime-picker
                    ref="picker"
                    type="date"
                    :startDate="starDate"
                    :endDate="endDate"
                    v-model="pickerValue"
                    @confirm="handleConfirm">
            </mt-datetime-picker>
            <cityPicker :visible="cityVisible" @cityToggle="cityToggle" @confirm="cityConfirm"></cityPicker>
            <!--状态-->
            <mt-popup v-model="c_s_open" position="bottom">
                <ul class="bottom-list">
                    <li v-for="(item,index) in contractStatus" @click="closeContract(index,item)">{{item}}</li>
                </ul>
            </mt-popup>

        </div>
    </layout>

</template>

<script>
    import {mapState} from "vuex";
    import layout from "./layout";
    import address from "../util/adress"
    import shade from "./shade"
    import noData from "./noData"
    import contractStatus from "../util/contractStatus"
    import scroller from "./scoller"
    import cityPicker from './cityPicker/cityPicker'
    import {dateFormat} from '../util/methods'

    export default{
        name: 'order',
        components: {
            layout,
            shade,
            noData,
            scroller,
            cityPicker
        },
        data: function () {
            //快捷筛选  状态
            const q_status = [{
                status: "2",
                text: '待签署'
            }, {
                status: '0',
                text: '待提交'
            }, {
                status: '3',
                text: '今日已成单'
            }, {
                status: '1',
                text: '今日已取消'
            }];

            return {
                cityVisible: false,
                qSearch: false,
                fSearch: false,
                addressShow: false,
                pickerValue: dateFormat(new Date(), "yyyy-MM-dd"),
                starDate:new Date(new Date().getFullYear() - 1, 0, 1),
                endDate:new Date(new Date().getFullYear() + 1, 11, 31),
                addressSlots: [{
                    width: '100%',
                    textAlign: 'right',
                    values: Object.keys(address)
                }, {
                    width: '100%',
                    textAlign: 'left',
                    values: ['北京']
                }],
                address: ['北京', '北京'],
                addressProvince: '北京',
                addressCity: '北京',
                contractStatus,
                c_s_open: false,
                q_status: q_status,
                no_data: false,
                cityName: '',
                page: 1,
                searchType: 0,
            }
        },
        methods: {
            addressChange (value, index) {
                switch (index) {
                    case 0:
                        this.addressProvince = value
                        const arr = address[value]
                        this.addressSlots[1].values = arr
                        this.addressCity = arr[0]
                        break
                    case 1:
                        this.addressCity = value
                        break
                }
                this.address = [this.addressProvince, this.addressCity]
            },
            showContract(){
                this.c_s_open = true;
            },
            closeContract(i, item){
                this.c_s_text = item;
                this.c_s_open = false;

                //更新state中的status
                this.$store.commit({type: 'setOrderParams',params:{"param$status": i}})
            },
            showAdress(){
                this.addressShow = !this.addressShow

            },
            showForm(){
                this.fSearch = !this.fSearch
                this.submit()
                window.scrollTo(0, 0);
            },
            hiddenForm(){
                if (this.fSearch == true){

                }
            },
            showSearchList(){
                this.qSearch = !this.qSearch
            },
            toOrderDetail(id, status){
                if(id.length == 11){
                    this.$store.commit({type: 'setOrderParams', params: {"selectContractStatus": status}})
                    this.$router.push("/order/" + id)
                    return true
                }
                this.$store.commit({type: 'setOrderParams', params: {"selectContractStatus": status}})
                this.$router.push("/order/uncommitted/" + id)
            },
            qStatus(status, index){
                if ((this.qActive == index)) {
                    this.$store.commit({type: 'setOrderParams', params: {"qActive": null, searchType: 0}})
                    this.submit()
                    this.showSearchList()
                    return true
                } else {
                    this.$store.commit({type: 'setOrderParams', params: {"qActive": index}})
                }
                this.$store.commit({
                    type: 'setOrderParams',
                    params: {"param$page": 1, fastStatus: this.q_status[this.qActive]['status'], searchType: 1}
                })
                this.showSearchList()
                this.request(false, true)
            },
            noData(){
                this.no_data = false;
            },
            submit(append = false, showNodata = false){
                this.$store.commit({type: 'setOrderParams', params: {"param$page": 1}})
                this.request(false, true)
            },
            request(append = false, showNodata = false){
                var self = this
                this.$store.dispatch({
                    type: 'orderList',
                    append: append,
                }).then(function (res) {
                    if (typeof(self.$refs.scroller) !== 'undefined') {
                        self.$refs.scroller.removeLoading()
                    }
                    if (res.data.length) {
                        self.no_data = false
                    } else {
                        !self.no_data ? self.$refs.scroller.isNoData() : null
                        self.no_data = showNodata ? true : false
                        self.$store.commit({type:'resetParam'})
                    }
                }, function (err) {

                })
            },
            handleConfirm(){
                let timeType;
                this.timeIndex == "0" ? timeType = "start_at" : timeType = "end_at"
                this.$store.commit({
                    type: 'setOrderTime',
                    timeType: timeType,
                    time: dateFormat(this.pickerValue, "yyyy-MM-dd")
                })
            },
            openPicker(i) {
                this.timeIndex = i;
                this.$refs.picker.open();
            },
            loadmore(){
                this.$store.commit({type: 'setOrderParams', params: {"param$page": this.searchParm.page + 1}})
                this.request(true, false)

            },
            refresh(){
                this.$store.commit({type: 'setOrderParams', params: {"param$page": 1}})
                this.request(false, false)
            },
            onValuesChange(picker, values) {
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
            },
            cityConfirm(select){
                if (select.city.key && select.proivnce.key) {
                    this.cityName = select.proivnce.key + "-" + select.city.key;
                    this.$store.commit({type: 'setOrderParams', params: {"param$city": select.city.value}})
                }
            },
            cityToggle(value){
                this.cityVisible = value;
            },
            clearCity(){
                this.cityName = ""
                this.$store.commit({type: 'setOrderParams', params: {"param$city": ''}})
            },
            clearStartAt(){
                this.$store.commit({type: 'setOrderParams', params: {"param$start_at": ''}})
            },
            clearEndAt(){
                this.$store.commit({type: 'setOrderParams', params: {"param$end_at": ''}})
            },
            clearStatus(){
                this.$store.commit({type: 'setOrderParams', params: {"param$status": ''}})
            },
            headMenuBlur(){
                this.qSearch = false
            }
        },
        watch: {
            no_data(cur, old){
                this.fSearch = old;
            },
        },
        computed: {
            ...mapState({
                orderList: state => state.order.orderList,
                searchParm: state => state.order.param,
                qActive: state => state.order.qActive,
            }),
            c_s_text:{
                get:function(){
                    return this.contractStatus[this.searchParm.status];
                },
                set:function(newValue){
                    this.property=newValue;
                }
            }
        },
        created: function () {
            //console.log(this.qActive)
        },
        mounted(){

        }

    }
</script>